<!--<template>
    <div :style="{
        height: screen ?'auto':'100%',
        position: screen? 'static':'relative'
    }" class="player-box">
        <div class="prism-player"
             :id="id"></div>
    </div>
</template>
<script>
    import {isApp, isAndroid} from '@@/common/plugins/common.js'

    window.PLAYER = null;
    export default {
        name: 'ls-ali-play',

        data() {
            return {
                screen: false,
            }
        },
        props: {
            sourceUrl: {
                type: String,
                required: true
            },
            coverUrl: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                default: 'J_prismPlayer'
            }
        },
        mounted() {
            setTimeout(() => {
                this.$nextTick(() => {
                    var _cover = this.coverUrl
                    var _source = this.sourceUrl
                    PLAYER = new Aliplayer({
                        id: this.id,
                        useH5Prism: true,
                        /*x5_type: 'h5',
                        x5_orientation: 'landscape',
                        x5_fullscreen: true,*/
                        autoplay: false,
                        width: '100%',
                        playsinline: true,
                        showBuffer: true,
                        source: _source,
                        cover: _cover
                    }, function (player) {

                    })
                    PLAYER.on('requestFullScreen', this.handleRequestFullScreen);
                    PLAYER.on('cancelFullScreen', this.handleCancelFullScreen);
                    if (isAndroid()) {
                        PLAYER.on('requestFullScreen', this.handleRequestFullScreen);
                        PLAYER.on('cancelFullScreen', this.handleCancelFullScreen);
                    }
                })
            }, 200)
        },
        methods: {
            handleRequestFullScreen() {
                console.log(1111)
                this.screen = true;
            },
            handleCancelFullScreen() {
                console.log(2222)
                this.screen = false;
            },
        }
    }
</script>
<style lang="scss">
    .prism-info-display {
        box-sizing: border-box;
    }

    .player-box {
        position: static;

        .prism-player {
            height: 100% !important;

            .prism-cc-btn,
            .prism-setting-btn,
            .prism-volume {
                display: none;
            }

            .prism-big-play-btn {
                position: absolute;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: 94px;
                height: 94px;
                background: url("./playbtn.png");
                background-size: 100% 100%;

                .outter {
                    border: none;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
</style>-->
<template>
    <!--static-->
    <!-- /* */-->
    <!--position: screen? 'static':-->
    <!-- height: screen ?'100%':'100%',-->
    <div :style="{
        position: screen? 'static':'relative'
    }" class="player-box">
        <div class="prism-player" :id="id"></div>

        <div v-show="flag" class="timer">
            {{timer}}/{{duration}}
        </div>
        <div v-show="flag || isInit" class="masking">
            <p v-show="!isPlay" @click.stop="handlerChangePlay" class="masking-btn"><img :src="play" alt=""></p>
            <p v-show="isPlay" @click.stop="handlerChangePause" class="masking-btn"><img :src="pause" alt=""></p>
        </div>
    </div>
</template>
<script>
    import {isAndroid} from '@@/common/plugins/common.js'

    window.PLAYER = null;
    export default {
        name: 'ls-ali-play',

        data() {
            return {
                screen: false,
                isInit: true,
                flag: true,
                isPlay: false,
                play: require('./playbtn.png'),
                pause: require('./pause.png'),
                isEnded: false,
                timer: '00:00',
                duration: '00:00',


                seekFlag: true
            }
        },
        props: {
            sourceUrl: {
                type: String,
                required: true
            },
            coverUrl: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                default: 'J_prismPlayer'
            },
            time: {
                type: Number,
                default: 0
            }
        },
        mounted() {
            this.$nextTick(() => {
                const _cover = this.coverUrl;
                const _source = this.sourceUrl;
                this.player = new Aliplayer({
                    id: this.id,
                    useH5Prism: true,

                    /*x5_type: 'h5',*/
                    /*x5_orientation: 'landscape',
                    x5_fullscreen: true,*/
                    autoplay: false,
                    width: '100%',
                    playsinline: true,//H5是否内置播放，有的Android浏览器不起作用
                    showBuffer: true,//	显示播放时缓冲图标，默认值为true
                    source: _source,
                    cover: _cover,
                    controlBarVisibility: "click",
                    showBarTime: 3000,
                }, (player) => {

                });
                this.player.on('ready', () => {
                    this.duration = this.transTime(this.player.getDuration());
                });
                this.player.on('canplay', () => {
                    if (this.seekFlag) {
                        this.player.seek(this.time);
                        this.seekFlag = false;
                    }

                });
                this.player.on('pause', this.handlePause);
                this.player.on('play', this.handlePlay);
                this.player.on('hideBar', this.handleHideBar);
                this.player.on('showBar', this.handleShowBar);
                this.player.on('ended', this.handleEnded);
                this.player.on('timeupdate', this.handleTimeupdate);
                this.player.on('error', this.handleError);
                if (isAndroid()) {
                    this.player.on('requestFullScreen', this.handleRequestFullScreen);
                    this.player.on('cancelFullScreen', this.handleCancelFullScreen);
                }

            })
        },
        destroyed() {
            this.player.dispose();
            this.player = null;
        },
        methods: {
            handleError(e) {
                console.log(e);
            },
            transTime(value) {
                let time = "";
                let h = parseInt(value / 3600);
                value %= 3600;
                let m = parseInt(value / 60);
                let s = parseInt(value % 60);
                if (h > 0) {
                    time = this.formatTime(h + ":" + m + ":" + s);
                } else {
                    time = this.formatTime(m + ":" + s);
                }
                return time;
            },
            formatTime(value) {
                let time = "";
                let s = value.split(":");
                let i = 0;
                for (; i < s.length - 1; i++) {
                    time += s[i].length === 1 ? "0" + s[i] : s[i];
                    time += ":";
                }
                time += s[i].length === 1 ? "0" + s[i] : s[i];
                return time;
            },
            handleTimeupdate() {
                this.timer = this.transTime(this.player.getCurrentTime());
            },
            handleRequestFullScreen() {
                this.screen = true;
            },
            handleCancelFullScreen() {
                this.screen = false;
            },
            handleHideBar() {
                this.flag = false;
            },
            handleShowBar() {
                this.flag = true;
            },
            handlePlay() {
                this.isPlay = true;
            },
            handlePause() {
                this.isPlay = false;
                this.isInit = true;
            },
            handlerChangePlay() {
                if (this.isEnded) {
                    this.player.seek(0);
                    this.isEnded = false;
                }
                this.player.play();
                this.isInit = false;

            },
            handlerChangePause() {
                this.player.pause();
            },
            handleEnded() {
                this.isEnded = true;

            }
        }
    }
</script>
<style lang="scss">
    .prism-player .prism-time-display {
        display: none;
        //隐藏时间
    }

    .prism-player .prism-info-display {
        display: none;
    }

    .prism-player .prism-liveshift-progress, .prism-player .prism-progress {
        bottom: 0 !important;
        height: 4px !important;
    }

    .prism-player .prism-play-btn {
        display: none;
    }

    .prism-player .prism-time-display {
        height: auto;
        line-height: 1;
        color: #FFFFFF;
        margin-left: 30px !important;
        margin-top: 5px !important;
        font-size: 28px;
    }

    .prism-player .prism-fullscreen-btn {
        margin-right: 30px !important;
        margin-top: 0 !important;
        background-image: url("./scale.png");
    }


    .prism-player .prism-liveshift-progress .prism-progress-loaded, .prism-player .prism-progress .prism-progress-loaded {
        background: gray;
    }

    .prism-player .prism-liveshift-progress .prism-progress-played, .prism-player .prism-progress .prism-progress-played {

        background: #26D4AD;
    }

    .prism-player .prism-liveshift-progress .cursor-hover, .prism-player .prism-progress .cursor-hover {
        width: 24px;
        height: 24px;
        background: #26D4AD;
        border-radius: 50%;
        top: -11px !important;

        img {
            display: none;
        }
    }

    .prism-info-display {
        box-sizing: border-box;
    }

    .player-box {
        height: 100%;
        position: static;

        .timer {
            position: absolute;
            left: 32px;
            bottom: 46px;
            color: #FFFFFF;
            font-size: 28px;
        }

        .masking {
            position: absolute;
            z-index: 100;
            width: 112px;
            height: 112px;
            left: calc(50% - 56px);
            top: calc(50% - 56px);

            .masking-btn {
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                }
            }
        }


        .prism-player {
            height: 100% !important;

            .prism-cc-btn, .prism-setting-btn, .prism-volume {
                display: none;
            }

            .prism-big-play-btn {
                display: none !important;
                /* z-index: 98;*/
                position: absolute;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: 94px;
                height: 94px;
                background: url('./playbtn.png');
                background-size: 100% 100%;

                .outter {
                    border: none;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
</style>
